<template>
	<view class="content">
		<view v-for="item in list" :key="item.name" @click="navTo(item.url)">{{ item.name }}</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
const list = ref([{
	name: '按钮(button-tab)',
	url: '/pages/buttonTab/index',
},{
	name: '选择(checker)',
	url: '/pages/checker/index'
},{
	name: '弹框(confirm)',
	url: '/pages/confirm/index'
},{
	name: '进度(flow)',
	url: '/pages/flow/index'
},{
	name: '计数(line-number)',
	url: '/pages/line-number/index'
},{
	name: '提示(popover)',
	url:'/pages/popover/index'
},{
	name: '单选（填写文本）(radio)',
	url: '/pages/radio/index'
},{
	name: '滑块选择(range)',
	url: '/pages/range/index'
},{
	name: '评分(rater)',
	url: '/pages/rater/index'
},{
	name: '搜索框(search)',
	url: '/pages/search/index'
},{
	name: '水平滚动(scroller)',
	url:'/pages/scroller/index'
},{
	name: '进度条(progress)',
	url:'/pages/progress/index'
},{
	name: '虚拟列表(virtualList)',
	url:'/pages/virtualList/index'
},{
	name: 'svg图片(svg)',
	url:'/pages/svg/index'
},{
	name: '画布(canvas)',
	url:'/pages/canvas/index'
},{
	name: '上传(upload)',
	url:'/pages/upload/index'
},{
	name: '浏览器组件(web-view)',
	url:'/pages/webview/index'
},{
	name: '图表(uchart)',
	url:'/pages/uchart/index'
},{
	name: '下拉刷新',
	url:'/pages/mescroll/index'
},{
	name: '通讯',
	url: '/pages/websocket/index'
}]);

const navTo = (url) => {
	uni.navigateTo({
		url: url
	})
}
</script>

<style>
	.content {
		padding: 40rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 30rpx;
	}
</style>
